<template>
  <div>
    <FlowListModel
      @open-change="change"
      @register="registerModal"
      @success="openFlowListSuccess"
      :btnItem="allData?.btnItem"
    />

    <FlowDetail v-model:visible="flowDetailVisible" ref="flowDetail" @change="change" />
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';

  import FlowListModel from '/@/components/FlowTable/src/components/FlowListModel.vue';
  import FlowDetail from '/@/components/FlowTable/src/components/FlowDetail.vue';
  import { useModal } from '/@/components/Modal';
  import { taskValidateApply } from '/@/api/jd/water-box';

  const props = defineProps({
    allData: {
      type: Object,
      default: () => {},
    },
    record: {
      type: Object,
      default: () => {},
    },
    setModalProps: {
      type: Function,
      default: () => {},
    },
  });
  const emit = defineEmits(['change']);

  const change = (data, type) => {
    if (flowDetailVisible.value) return;
    if (type === 'send') {
      props.allData?.btnItem?.tabFn?.reload();
    }
    emit('change', data);
  };

  const [registerModal, { openModal }] = useModal();

  const flowDetailVisible = ref(false);

  const flowDetail = ref<any>(null);
  props.setModalProps({ loading: false });

  function openFlowListSuccess(id) {
    flowDetailVisible.value = true;
    if (flowDetail.value) {
      delete props.allData.btnItem.record;
      flowDetail.value?.openPage(true, {
        templateId: id,
        ...props.allData?.btnItem,
        record_data: props.record,
        fieldsMap: props.record,
        isCheck: true,
      });
    }
  }
  nextTick(() => {
    console.log();
    taskValidateApply(props.record?.apply_id).then(
      () => {
        const dyParam = props.allData?.btnItem.dynamicParams;
        const record = props.allData?.data;
        openModal(true, record[dyParam]);
      },
      (err) => {
        console.log(err);
        change(false, '');
      },
    );
  });
</script>

<style lang="less" scoped></style>
